<!--
 * @description  :当事人选择
 * @descriptionDetail:当事人选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-08-22 11:26:19
-->
<template>
  <view class="page">
    <theme-navbar :is-white="false" :isBack="false" backColor="#2b85e4" title="当事人选择">
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content u-page">
      <view class="n-lay" v-for="d in partyList" :key="d.partyUuid">
        <!-- 多选 -->
        <view class="item-checkbox item-content" v-if="isCheckBox">
          <u-checkbox
            :name="d.partyUuid"
            :size="50"
            shape="square"
            v-model="d.checked"
            @change="checkboxChange"
          >
            <view>姓名/企业名称: {{ d.partyName }}</view>
            <view>字号名称/法定负责人: {{ d.companyName }}</view>
            <view>{{ d.idCardTypeName }} {{ d.idCard }}</view>
            <view>联系电话: {{ d.phone }}</view>
          </u-checkbox>
        </view>
        <view v-else>
          <!-- 单选 -->
          <u-radio-group v-model="radioValue">
            <u-radio shape="circle" :size="50" @change="radioChange" :name="d.partyUuid">
              <view>姓名/企业名称: {{ d.partyName }}</view>
              <view>字号名称/法定负责人: {{ d.companyName }}</view>
              <view>{{ d.idCardTypeName }} {{ d.idCard }}</view>
              <view>联系电话: {{ d.phone }}</view>
            </u-radio>
          </u-radio-group>
        </view>
      </view>
      <view v-if="partyList.length == 0" class="no-data">
        ~ 暂无数据 ~
      </view>
    </view>
  </view>
</template>

<script>
import listView from '@/components/list_view.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
export default {
  name:'SelectPartyComponent',
  components: {
    // listView,
  },
  mixins: [MescrollMoreMixin,],
  props: {
    params: {
      type: Object,
      default: function() {
        return {}
      },
    },
    isCheckBox:{
      type:Boolean,
      default:true,
    },
  },
  data() {
    return {
      selUsers: [],
      partyList:[],
      radioValue:'',
    }
  },
  mounted() {
    this.initParty();
    this.radioValue = this.params.selUsersStr;
  },
  methods: {
    initParty(){
      this.partyList = JSON.parse(JSON.stringify(this.params.list));
      if (this.partyList.length > 0) {
        this.selUsers = [];
        this.partyList.forEach(itm => {
          if(this.params.selUsersStr){
            itm.checked = this.params.selUsersStr.indexOf(itm.partyUuid) != -1;
          }else{
            itm.checked = false;
          }
        });
      }
    },
    // 多选事件
    checkboxChange(e) {
      let idx;
      let selectObj;
      this.partyList.forEach((itm,index) => {
        if(itm.partyUuid == e.name){
          itm.checked = e.value;
          idx = index;
          selectObj = itm;
        }
      });
      this.$set(this.partyList,idx,selectObj);
    },
    // 单选事件
    radioChange(e){
      console.log(e);
      this.selUsers = [];
      this.partyList.forEach((item) => {
        if(item.partyUuid == e) {
          this.radioValue = item.partyUuid;
          item.checked = true;
          // return item;
        }else{
          item.checked = false;
        }
      })
    },
    getListViewHeight() {
      let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(180) - this.$u.sys().statusBarHeight) + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = uni.upx2px(180) + "px";
      // #endif
      return p;
    },
    onSure() {
      let uuids = [];
      let names = [];
      this.partyList.forEach(itm => {
        if(itm.checked){
          this.selUsers.push(itm);
        }
      });
      if (this.selUsers.length === 0) {
        this.$u.toast("请选择当事人");
        return;
      }
      this.selUsers.forEach((item) => {
        uuids.push(item.partyUuid);
        names.push(item.partyName);
      });
      this.$emit("choose", {list:this.selUsers,partyUuids:uuids.join(","),partyNames:names.join(","),});
    },
  },
}
</script>

<style scoped lang="scss">
.n-lay {
	width: 100%;
	display: block;
	padding: 20rpx 20rpx;
	border-bottom: 1px solid $u-border-color;
}
.select-lay {
	padding: 20rpx 20rpx;
	border-bottom: 1px solid $u-bg-color;
}
.sel-desc{
    margin-top: 32rpx;
    color:#999999;
    font-size: 15px;
}
.select-users {
	height: 28px;
	margin-top: 30rpx;

	uni-text {
		color:#027AFF;
		background: #E6F1FF;
		width: auto;
		font-size: 15px;
		font-weight: bold;
		// border: 1px solid #1fa3ff;
		border-radius: 16px;
		padding: 3px;
		margin: 3px;
	}
}

.nav-right-icon {
	margin-right: 30rpx;
	font-size: .8rem;
	color: #FFF;
}
.no-data{
	text-align: center;margin: 20px;
}
</style>
